<template>
  <div>
    <!-- 订单模块下属六个页面
    1.订单信息 2.超时订单(本页面) 3.进出信息 4.订单评论 5.订单日志 6.物业流水 -->
    <div style="padding-bottom:5px">
      <el-button @click="showOrderOvertimeWindow">查询</el-button>
    </div>

    <el-table :data="page.records">
      <el-table-column type="expand">
        <template slot-scope="props">
          <el-form label-position="left" inline class="demo-table-expand">
            <el-form-item label="用户信息Id">
              <span>{{props.row.userInfoId}}</span>
            </el-form-item>
            <el-form-item label="车牌号">
              <span>{{props.row.userCarPlate}}</span>
            </el-form-item>
            <el-form-item label="持续小时">
              <span>{{ props.row.enduHour }}</span>
            </el-form-item>
            <el-form-item label="支付价格">
              <span>{{ props.row.payPrice }}</span>
            </el-form-item>
            <el-form-item label="支付时间">
              <span>{{ props.row.payPrice }}</span>
            </el-form-item>
          </el-form>
        </template>
      </el-table-column>
      <el-table-column
        label="订单编号"
        prop="orderInfoNum"
        width="150">
      </el-table-column>
      <el-table-column
        label="支付状态"
        prop="payState"
        width="150">
      </el-table-column>
      <el-table-column
        label="车位号"
        prop="stallInfo"
        width="150">
      </el-table-column>
      <el-table-column
        label="用户姓名"
        prop="userInfoName"
        width="150">
      </el-table-column>
      <el-table-column
        label="开始时间"
        prop="startTime"
        width="150">
      </el-table-column>
      <el-table-column
        label="结束时间"
        prop="endTime"
        width="150">
      </el-table-column>
    </el-table>

    <div style="padding-top:5px">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="page.current"
        :page-sizes="[3,5,7]"
        :page-size="page.size"
        layout="total, sizes, prev, pager, next, jumper"
        :total="page.total">
      </el-pagination>
    </div>

    <el-dialog :visible.sync="window">

      <div style="padding-bottom:10px">
        <el-date-picker v-model="overtimeSelect.startTime" value-format="yyyy-MM-dd HH:mm:ss"  type="datetime" placeholder="选择开始日期"></el-date-picker>
        &nbsp;
        <el-date-picker v-model="overtimeSelect.endTime" value-format="yyyy-MM-dd HH:mm:ss" type="datetime" placeholder="选择结束日期"></el-date-picker>
      </div>
      <div style="padding-bottom:10px">
      <el-input placeholder="请输入订单编号" style="width:200px" v-model="overtimeSelect.orderInfoNum"></el-input>
      &nbsp;
      <el-select v-model="overtimeSelect.payState" placeholder="请选择支付状态">
        <el-option value="0" label="未支付"></el-option>
        <el-option value="1" label="已支付"></el-option>
      </el-select>
      </div>
      <el-input placeholder="请输入用户信息Id" style="width:200px" v-model="overtimeSelect.userInfoId"></el-input>
      &nbsp;
      <el-input placeholder="请输入车位号" style="width:200px" v-model="overtimeSelect.stallInfo"></el-input>
      <div style="padding-top:10px">
        <el-button @click="window=false">取 消</el-button>
        <el-button @click="showOrderOvertime">查 询</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
export default {
  name: 'OrderOvertime',
  data () {
    return {
      page: [],
      window: false,
      overtimeSelect:{
        payState: "",
        orderInfoNum: "",
        userInfoId: "",
        stallInfo: "",
        startTime: "",
        endTime: ""
      },
      overtimeSelected:{
        payState: "",
        orderInfoNum: "",
        userInfoId: "",
        stallInfo: "",
        startTime: "",
        endTime: ""
      }
    }
  },
  methods:{
    showOrderOvertimeWindow(){
      this.window = true
      this.overtimeSelect.payState = ""
      this.overtimeSelect.orderInfoNum = ""
      this.overtimeSelect.userInfoId = ""
      this.overtimeSelect.stallInfo = ""
      this.overtimeSelect.startTime = ""
      this.overtimeSelect.endTime = ""
    },
    showOrderOvertimeProper(pageNum,pageSize){
      this.$http.get("/order/orderOvertime/findOvertime.certified",{
        params:{
          pageNum:pageNum==""?1:pageNum,
          pageSize:pageSize==""?3:pageSize,
          payState:this.overtimeSelected.payState,
          orderInfoNum:this.overtimeSelected.orderInfoNum==""?null:this.overtimeSelected.orderInfoNum,
          userInfoId:this.overtimeSelected.userInfoId,
          stallInfo:this.overtimeSelected.stallInfo==""?null:this.overtimeSelected.stallInfo,
          startTime:this.overtimeSelected.startTime,
          endTime:this.overtimeSelected.endTime
        }
      }).then(resp=>{　
        if(resp.data.flag) this.page = resp.data.data
        else this.$alert(resp.data.message)　　
      })
    },
    handleSizeChange(val) {
      this.showOrderProper("",val)
    },
    handleCurrentChange(val) {
      this.showOrderProper(val,this.page.size)
    },
    showOrderOvertime(){
      this.overtimeSelected.payState = this.overtimeSelect.payState
      this.overtimeSelected.orderInfoNum = this.overtimeSelect.orderInfoNum
      this.overtimeSelected.userInfoId = this.overtimeSelect.userInfoId
      this.overtimeSelected.stallInfo = this.overtimeSelect.stallInfo
      this.overtimeSelected.startTime = this.overtimeSelect.startTime
      this.overtimeSelected.endTime = this.overtimeSelect.endTime
      this.showOrderOvertimeProper("","")
      this.window = false
    }
  },
  created(){
    this.showOrderOvertimeProper("","")
  }
}
</script>

<style>
</style>
